<template>
    <div>
        <el-table :data="students" style="width: 100%">
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="gender" label="性别" />
            <el-table-column prop="age" label="年龄" />
            <el-table-column label="操作">
                <template  #default="scope">
                    <el-button type="primary" size="small" @click="handleUpdate(scope.row.id)">修改</el-button>
                    <el-button type="danger" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script setup>
import {defineProps} from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import { storeToRefs } from 'pinia';
import { useStudentStore } from '../../stores/student';
import { deleteStudent } from '../../services/student';
const emit = defineEmits(['show']);
const studentStore = useStudentStore();
const {fetchStudent} = studentStore;
const {updateVisible} = storeToRefs(studentStore);
const props = defineProps(['students']);
function handleUpdate(id){
    fetchStudent(id);
    updateVisible.value = true;
}
function handleDelete(id){
    ElMessageBox.confirm(
    '是否确定删除?',
    'Warning',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  )
    .then(async () => {
      await deleteStudent(id);
      emit('show');
    })
  
}
</script>
